var vm_tma_demo = new Vue({
  el: ".vue_tma_demo",
  delimiters: ["[[", "]]"],
  data: {
    btn_msg: "提交更新",
    data_input_valid: true,
    own_sub: {
      speed: 10,
      course: 70,
    },
    target_sub: {
      speed: 6,
      course: 270,
    },
    target_init_distance: 15,
    target_init_bearing: 40,
    observe_interval: 3,
    duration: 60,
    myChart: null,
    image_display: null,
    datas: [],
    links: [],
    series: [],
    target_true_data: "",
    target_ekelund_data: "",
    toolip: null,
  },
  created() {
    window.addEventListener("resize", this.myEventHandler, false);
  },
  destroyed() {
    window.removeEventListener("resize", this.myEventHandler, false);
  },
  mounted() {
    this.tma_demo_draw();
    // this.test02()
  },
  methods: {
    update(e) {
      this.tma_demo_draw();
    },
    myEventHandler(e) {
      this.myChart.resize();
    },
    async axiosGet(url, params) {
      try {
        const response = await axios.get(url, { params });
        return response.data;
      } catch (err) {
        console.log(err.response.status);
      }
    },
    async tma_demo_draw() {
      if (
        3 <= this.duration &&
        this.duration <= 90 &&
        1 <= this.observe_interval &&
        this.observe_interval < 11 &&
        0 <= this.own_sub.speed &&
        this.own_sub.speed < 61 &&
        0 <= this.own_sub.course &&
        this.own_sub.course < 360 &&
        0 <= this.target_sub.speed &&
        this.target_sub.speed < 61 &&
        0 <= this.target_sub.course &&
        this.target_sub.course < 360 &&
        1 <= this.target_init_distance &&
        this.target_init_distance < 51 &&
        0 <= this.target_init_bearing &&
        this.target_init_bearing < 360
      ) {
        this.data_input_valid = true;
      } else {
        this.data_input_valid = false;
      }
      let params = {
        duration: this.duration,
        observe_interval: this.observe_interval,
        target_speed: this.target_sub.speed,
        target_course: this.target_sub.course,
        own_speed: this.own_sub.speed,
        own_course: this.own_sub.course,
        target_init_distance: this.target_init_distance,
        target_init_bearing: this.target_init_bearing,
      };
      if (!this.myChart) {
        let chartDom = document.getElementById("chart");
        this.myChart = echarts.init(chartDom);
      } else {
        this.myChart.clear();
      }
      let result = await this.axiosGet("/tutorial/tma-track-data/", params);
      this.target_true_data = result.target_true_data;
      this.target_ekelund_data = result.target_ekelund_data;
      let datas = result.datas;
      let max_x = result.max_x;
      let min_x = result.min_x;
      let max_y = result.max_y;
      let min_y = result.min_y;
      let series = [];
      let own_tracks = result.own_tracks;
      let target_tracks = result.target_tracks;
      // target bearing line
      datas.forEach((item, index) => {
        series.push({
          type: "line",
          symbolSize: 3,
          symbol: "circle",
          id: item.name,
          name: item.name,
          data: item.line,
          lineStyle: {
            color: "gray",
            width: 2,
            opacity: 0.5,
          },
          emphasis: {
            focus: "series",
          },
          triggerLineEvent: true,
        });
      });
      // own sub tracks line
      series.push({
        type: "lines",
        name: "own_tracks",
        coordinateSystem: "cartesian2d",
        // colorBy: 'data',
        // data: [[[50, 40], [49.5, 39.96]], [[49.5, 39.96], [49.0, 39.91]]],
        // data: [[[50, 40], [42.03, 39.3]]],
        data: own_tracks,
        lineStyle: {
          width: 2,
          // color: '#ea7ccc',
          color: "#30A5A7",
          type: "dashed",
        },
        label: {
          show: true,
          position: "start",
          distance: 11,
          fontSize: 15,
          formatter: "own sub",
          backgroundColor: "#79C5C7",
          borderColor: "#79C5C7",
          borderWidth: 2,
          borderRadius: 7,
        },
        effect: {
          width: 5,
          show: true,
          period: 20,
          symbol: "arrow",
          symbolSize: 10,
          // color: '#73c0de',
          trailLength: 0.6,
        },
      });
      series.push({
        type: "lines",
        name: "target_tracks",
        id: "target_tracks",
        coordinateSystem: "cartesian2d",
        // colorBy: 'data',
        // data: [[[50, 40], [49.5, 39.96]], [[49.5, 39.96], [49.0, 39.91]]],
        // data: [[[50, 40], [42.03, 39.3]]],
        data: target_tracks,
        lineStyle: {
          // color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
          width: 2,
          color: "#ee6666",
          type: "dashed",
        },
        // symbol: 'arrow',
        label: {
          show: true,
          position: "start",
          distance: 11,
          fontSize: 15,
          formatter: "target ship",
          backgroundColor: "#F5F7FA",
          backgroundColor: "#F3A1A1",
          borderColor: "#F3A1A1",
          borderWidth: 2,
          borderRadius: 7,
        },
        effect: {
          width: 5,
          show: true,
          period: 20,
          symbol: "arrow",
          symbolSize: 10,
          // color: '#73c0de',
          trailLength: 0.6,
        },
      });
      let option = {
        // legend: {
        //  data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        // },
        notMerge: true,
        grid: {
          top: "0",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: false,
        },
        tooltip: {
          show: true,
          trigger: "item",
          // triggerOn: 'mousemove',
          triggerOn: "none",
          confine: true,
          formatter: (params) => {
            if (params.seriesName == "own_tracks") {
              // @todo update data
              return (
                "own submarine <br/>speed: " +
                this.own_sub.speed +
                "<br /> course: " +
                this.own_sub.course
              );
            } else if (params.seriesName == "target_tracks") {
              return (
                "target submarine <br/>speed: " +
                this.target_sub.speed +
                "<br /> course: " +
                this.target_sub.course
              );
            } else {
              return (
                params.seriesName +
                "<br />true bearing: " +
                this.target_true_data[params.seriesIndex][0] +
                "<br />true range: " +
                this.target_true_data[params.seriesIndex][1] +
                "<br/>ekelund range: " +
                this.target_ekelund_data[params.seriesIndex][2]
              );
            }
          },
        },
        title: {
          // @todo correspond to 'submarine's data'
          text: "TMA",
          left: "center",
        },
        toolbox: {
          // left: '10%',
          // top: '10%',
          feature: {
            saveAsImage: {},
            dataView: {},
            restore: {},
          },
        },
        // color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        // color: ['#61a0a8'],
        xAxis: {
          show: true,
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          min: min_x,
          max: max_x,
          type: "value",
          axisLine: { onZero: false },
        },
        yAxis: {
          show: true,
          axisLine: { show: false },
          axisLabel: { show: false },
          axisTick: { show: false },
          min: min_y,
          max: max_y,
          type: "value",
          axisLine: { onZero: false },
        },
        series: series,
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: 0,
            filterMode: "none",
          },
          {
            type: "inside",
            yAxisIndex: 0,
            filterMode: "none",
          },
        ],
      };
      option && this.myChart.setOption(option);
      // console.log(series)
      // this.myChart.resize();
      this.myChart.on("mouseout", (params) => {
        this.myChart.dispatchAction({
          type: "hideTip",
          seriesIndex: params.seriesIndex,
          dataIndex: 1,
          position: "left",
        });
      });
      this.myChart.on("mousemove", (params) => {
        // this.myChart.dispatchAction({
        //  type: 'showTip',
        //  seriesIndex: params.seriesIndex,
        //  dataIndex: 1,
        //  position: 'left',
        // })
        if (
          params.seriesName == "own_tracks" ||
          params.seriesName == "target_tracks"
        ) {
          // console.log(params)
          this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: params.seriesIndex,
            dataIndex: 0,
            position: "left",
          });
          return;
        } else {
          this.myChart.dispatchAction({
            type: "showTip",
            seriesIndex: params.seriesIndex,
            dataIndex: 1,
            position: "left",
          });
        }
      });
    },
  },
  watch: {
    deep: true,
    duration: {
      handler: function () {
        if (3 <= this.duration && this.duration <= 90) {
          (this.btn_msg = "提交更新"), (this.data_input_valid = true);
        } else {
          (this.btn_msg = "输入数据不合规"), (this.data_input_valid = false);
        }
      },
    },
    observe_interval: {
      handler: function () {
        if (1 <= this.observe_interval && this.observe_interval < 11) {
          (this.btn_msg = "提交更新"), (this.data_input_valid = true);
        } else {
          (this.btn_msg = "输入数据有误"), (this.data_input_valid = false);
        }
      },
    },
    own_sub: {
      deep: true,
      handler: function () {
        if (
          0 <= this.own_sub.speed &&
          this.own_sub.speed < 61 &&
          0 <= this.own_sub.course &&
          this.own_sub.course < 360
        ) {
          (this.btn_msg = "提交更新"), (this.data_input_valid = true);
        } else {
          (this.btn_msg = "输入数据有误"), (this.data_input_valid = false);
        }
      },
    },
    target_sub: {
      deep: true,
      handler: function () {
        if (
          0 <= this.target_sub.speed &&
          this.target_sub.speed < 61 &&
          0 <= this.target_sub.course &&
          this.target_sub.course < 360
        ) {
          (this.btn_msg = "提交更新"), (this.data_input_valid = true);
        } else {
          (this.btn_msg = "输入数据有误"), (this.data_input_valid = false);
        }
      },
    },
    target_init_distance: {
      handler: function () {
        if (1 <= this.target_init_distance && this.target_init_distance < 51) {
          (this.btn_msg = "提交更新"), (this.data_input_valid = true);
        } else {
          (this.btn_msg = "输入数据有误"), (this.data_input_valid = false);
        }
      },
    },
    target_init_bearing: {
      handler: function () {
        if (0 <= this.target_init_bearing && this.target_init_bearing < 360) {
          (this.btn_msg = "提交更新"), (this.data_input_valid = true);
        } else {
          (this.btn_msg = "输入数据有误"), (this.data_input_valid = false);
        }
      },
    },
  },
});
